<template>
  <div class="container">
    <Header></Header>
    <div class="second">
      <div class="login_form">
        <span class="span1">请注册~~~</span><br>
        <el-form :model="registerUser" :rules="rules" ref="registerForm">
          <el-form-item prop="userName">
            <el-input v-model="registerUser.userName" type="text" class="ipt1" placeholder="请输入账号"></el-input><br>
          </el-form-item>
          <el-form-item prop="userPassword">
            <el-input v-model="registerUser.userPassword" type="password" class="ipt2" placeholder="请输入密码"></el-input><br>
          </el-form-item>
        </el-form>
        <button class="btn1" @click="submitForm('registerForm')">注册</button><br>
        <a href="###" @click="go()"><span class="go">去登录~~~</span></a>
      </div>
      <img src="../assets/logo.jpg">
    </div>
  </div>
</template>

<script>
import Header from '../components/header.vue'

export default {
  name: 'register',
  components: {
    Header
  },
  data() {
    return {
      registerUser: {
        userName: '',
        userPassword: '',
      },
      rules: {
        userName: [
          {
            required: true,
            message: '账号不能为空',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 30,
            message: '长度在2到4个字符之间',
            trigger: 'blur'
          }
        ],
        userPassword: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 30,
            message: '长度在6到30个字符之间',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('api/user/register', this.registerUser)
            .then(res => {
              this.$message({
                message: '账号注册成功',
                type: "success"
              })
              this.$router.push('/login');
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    go() {
      this.$router.push('/login');
    }
  }
}
</script>

<style scoped>
.container {
  position: relative;
}

img {
  width: 1335px;
  height: 480px;
  filter: blur(3px);
}

.login_form {
  position: absolute;
  top: 123px;
  left: 860px;
  width: 407px;
  height: 458px;
  background-color: white;
  border-radius: 10px 10px;
  z-index: 999;
}

.span1 {
  font-family: 'Microsoft YaHei';
  font-size: 35px;
  color: gray;
}

.ipt1,
.ipt2 {
  margin-top: 60px;
  margin-left: 30px;
  height: 40px;
  width: 300px;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
}

.btn1 {
  margin-top: 50px;
  margin-left: 150px;
  width: 100px;
  height: 40px;
  background-color: gray;
  border: none;
}

.go {
  margin-top: 50px;
  float: right;
  color: blue;
}
</style>
